Hello and thank you for using Sync Mobile App Landing Page Template. Sync is a landing page template built with HTML and Bootstrap to help you present mobile apps to the online audience and get visitors to become users. It features details lightbox, tabbed content, image slider, image lightbox, statistics numbers, dropdown navigation, extra pages and working form.
Built with Bootstrap, HTML, CSS, PHP and JavaScript it will help you achieve your online marketing goals in a beautiful and efficient manner.
Frameworks and toolkits used: Bootstrap, Popper, jQuery, jQuery Easing, Validator, Magnific Popup, Swiper.
You can edit the template's Html, Css, Php, Js files with your preferred text and code editor: Notepad++, Visual Code, Sublime or any other...
For image editing you can use Adobe Photoshop or any other graphic editor of your choice.
Documentation - is the folder of this help file.
Web - contains the html, css, js and php files of the template.
Web folder includes index.html file which you will use to open the template and the extra pages: article-details.html, privacy-policy.html, terms-conditions.html. Besides index.html, you will also find the following folders:
Here are the links to the mockups used throughout the template:
It's a premium file from Freepik and I've used it because I have a premium Freepik subscription which is $99/year but has a big discount for the first year, usually around $60 or $70. But you don't have to use this exact same file, you can use any mockup you find on the web at a lower price or even free.
Here are some links to free and paid iPhone mockups:
But you can always find more and updated ones with a simple google search for "iphone x clay isometric"
Here are the links to the images used throughout the template:
You can find your own images while checking out the following free online sources:
- Place your image file in the images folder
- Open for editing index.html
- Find Navigation section
- Here find this line of code:
<a class="navbar-brand logo-image" href="index.html"><img src="images/logo.svg" alt="alternative"></a>
- Sync uses some decorative elements in the header section of the template
They are svg images positioned with css
- To change these images just add your own svg illustrations in the images folder
- Then also add them in index.html by opening the file and finding the header section
- And look for the following lines of code
<div class="deco-white-circle-1"> <img src="images/decorative-white-circle.svg" alt="alternative"> </div> <!-- end of deco-white-circle-1 --> <div class="deco-white-circle-2"> <img src="images/decorative-white-circle.svg" alt="alternative"> </div> <!-- end of deco-white-circle-2 --> <div class="deco-blue-circle"> <img src="images/decorative-blue-circle.svg" alt="alternative"> </div> <!-- end of deco-blue-circle --> <div class="deco-yellow-circle"> <img src="images/decorative-yellow-circle.svg" alt="alternative"> </div> <!-- end of deco-yellow-circle --> <div class="deco-green-diamond"> <img src="images/decorative-green-diamond.svg" alt="alternative"> </div> <!-- end of deco-yellow-circle -->
.header .deco-white-circle-1,
.header .deco-white-circle-2,
.header .deco-blue-circle,
.header .deco-yellow-circle,
.header .deco-green-diamond {
display: none;
}
.header .deco-white-circle-1 {
position: absolute;
top: 26rem;
left: -12rem;
display: block;
width: 22rem;
height: 22rem;
}
.header .image-container {
width: 58.0625rem;
height: 36.125rem;
margin-right: auto;
margin-left: auto;
}
- Just apply the above steps for the Download section of the template
- Add the svgs in index.html
- Adjust their properties in css: make them invisible for the initial mobile view and visible above the 992px breakpoint
- Edit and save the image files in the images folder
- Open for editing index.html
- Find the section Description 1 then look for the following lines of code
<div class="image-container"> <img class="img-fluid" src="images/description-1-app.png" alt="alternative"> </div> <!-- end of image-container -->
- Edit and save the image files in the images folder
- Open for editing index.html
- Find the section Screenshots then Image Slider then the following lines of code
<!-- Slide -->
<div class="swiper-slide">
<a href="images/screenshot-1.jpg" class="popup-link" data-effect="fadeIn">
<img class="img-fluid" src="images/screenshot-1.jpg" alt="alternative">
</a>
</div>
<!-- end of slide -->
Sync uses the Swiper plugin for the image slider. You can change settings like: time between slides, pause on hover, reactions to keyboard and others by visiting the plugins page: http://idangero.us/swiper/api/ and adding them to the Image Slider - Swiper section in js/scripts.js
/* Image Slider - Swiper */
var imageSlider = new Swiper('.image-slider', {
autoplay: {
delay: 2000,
disableOnInteraction: false
},
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
spaceBetween: 30,
slidesPerView: 5,
breakpoints: {
// when window is <= 516px
516: {
slidesPerView: 1,
spaceBetween: 10
},
// when window is <= 767px
767: {
slidesPerView: 2,
spaceBetween: 20
},
// when window is <= 991px
991: {
slidesPerView: 3,
spaceBetween: 30
},
// when window is <= 1199px
1199: {
slidesPerView: 4,
spaceBetween: 30
},
}
});
Sync uses Font Awesome icon font in many sections and elements.
To change one of the Font Awesome icons you can simply replace the classes that you'll find in index.html e.g. fa-users, fa-code, fa-cog with the ones that you need from http://fontawesome.io/icons/
To change social media icons in the Footer section of the template, you need to:
- Open index.html from the template folder
- Find the section Social Links in the Newsletter:
- And replace fa-facebook-f, fa-twitter, and so on... with the classes name that you need from http://fontawesome.io/icons/ in the Brand Icons section
- Also don't forget to replace href="#your-link" with the link to your social page or account
If you want to control the way the posts look like when you share the landing page on social media (Facebook, Google+ and LinkedIn especially) don't forget to update the OG Meta Tags (OpenGraph) in the Head section of the index.html file.
<meta property="og:site_name" content="" /> <!-- website name --> <meta property="og:site" content="" /> <!-- website link --> <meta property="og:title" content=""/> <!-- title shown in the actual shared post --> <meta property="og:description" content="" /> <!-- description shown in the actual shared post --> <meta property="og:image" content="" /> <!-- image link, make sure it's jpg --> <meta property="og:url" content="" /> <!-- where do you want your post to link to --> <meta property="og:type" content="article" />
To receive emails with data from your visitors simply change the line $EmailTo = "yourname@domain.com"; to your email address in the php folder in the following files:
Attention:The script only runs online (on a liver server with PHP support) so the forms will not work while the landing page is offline on your hard-drive
If you want to change input fields names, you will need to update them accordingly in the following files:
To setup a redirect to a thank you page on form submit, you need to:
- Open js/scripts.js inside the template folder
- Find the following block of code in the form section
function pformSuccess() {
$("#privacyForm")[0].reset();
psubmitMSG(true, "Request Submitted!");
$("input").removeClass('notEmpty'); // resets the field label after submission
}
function pformSuccess() {
$("#privacyForm")[0].reset();
window.location.href = "https://yourlinkhere.com";
}
Premium items: Support is taken very seriously and is offered via email lucian@inovatik.com for 12 months from the purchase date.
Free items: Because of limited resources at this point I am not able to provide support for free items but don't hesitate to send your questions at lucian@inovatik.com and I will try to help and at least point you in the right direction.